<template>
  <div class="h-full">
    <vxe-grid v-bind="gridOptions">
      <template #header="x">{{ x }}</template>
    </vxe-grid>
  </div>
</template>

<script setup lang="ts" generic="T">
import type { VxeGridProps, VxeTablePropTypes } from 'vxe-table'
import type { ColumnInfo } from './typing'

const props = defineProps<{
  rowHeight: number
  headerCellStyle: VxeTablePropTypes.HeaderCellStyle<T>
  columns: ColumnInfo[]
  data: T[]
}>()
const { columns, data, rowHeight, headerCellStyle } = toRefs(props)
const gridOptions = reactive<VxeGridProps<T>>({
  border: true,
  height: 'auto',
  align: null,
  columnConfig: {
    resizable: true
  },
  headerCellStyle: headerCellStyle.value,
  rowConfig: { height: rowHeight.value },
  columns: columns.value.map((item) => ({
    type: item.type,
    field: item.field,
    width: item.width,
    title: item.title,
    align: item.align,
    showOverflow: true
    // slots: { header: 'header' }
  })),
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons'
    }
  },
  data: data.value
})
</script>

<style scoped></style>
